import React from 'react';
import { Form, Input, Select, Checkbox, Button,Space} from 'antd';
import Pannel from '../../component/Pannel/Pannel'  //自定义的组件

const { Option } = Select;

const MyForm = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Received values of form:', values);
  };

  const onReset = () => {
    form.resetFields();
  };

  const onFill = () => {
    form.setFieldsValue({ username: '三丰',password:"123", gender: 'male' });
  };

  return (

    <Pannel title="产品添加">
      <Form name="myForm" form={form}  onFinish={onFinish} layout="vertical" style={{margin:"15px"}}>
            <Form.Item
              label="Username"
              name="username"
              rules={[{ required: true, message: 'Please input your username!' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="Password"
              name="password"
              rules={[{ required: true, message: 'Please input your password!' }]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item
              label="Gender"
              name="gender"
              rules={[{ required: true, message: 'Please select your gender!' }]}
            >
              <Select>
                <Option value="male">Male</Option>
                <Option value="female">Female</Option>
                <Option value="other">Other</Option>
              </Select>
            </Form.Item>

            <Form.Item
              name="remember"
              valuePropName="checked"
              wrapperCol={{ offset: 0, span: 24 }}
            >
              <Checkbox>Remember me</Checkbox>
            </Form.Item>

            <Form.Item wrapperCol={{ offset: 0, span: 24 }}>
              
              <Space>
                  <Button type="primary" htmlType="submit">
                    Submit
                  </Button>
                  <Button htmlType="button" onClick={onReset}>
                    Reset
                  </Button>
                  <Button type="dashed" htmlType="button" onClick={onFill}>
                    Fill form
                  </Button>
              </Space>

            </Form.Item>
          </Form>
        
    </Pannel>
  );
};

export default MyForm;